<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Accordion 手风琴 | Vue DevUI</title>
    <meta name="description" content="Vue DevUI 组件库">
    <link rel="stylesheet" href="/assets/style.b884dd64.css">
    <link rel="modulepreload" href="/assets/Home.e734a50d.js">
    <link rel="modulepreload" href="/assets/AlgoliaSearchBox.e66f60b3.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="modulepreload" href="/assets/components_accordion_index.md.a92e3443.lean.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
    <meta name="twitter:title" content="Accordion 手风琴 | Vue DevUI">
    <meta property="og:title" content="Accordion 手风琴 | Vue DevUI">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-4bb0db66><div class="nav-bar-inner" data-v-4bb0db66><div class="sidebar-button" data-v-4bb0db66><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" aria-label="Vue DevUI, back to home" data-v-4bb0db66 data-v-4d0f7fcc><img class="logo" src="/../../assets/logo.svg" alt="Logo" data-v-4d0f7fcc><span data-v-4d0f7fcc>Vue DevUI</span></a><!--[--><!--[--><div id="docsearch" multilang="false"></div><!--]--><!--]--><div class="flex-grow" data-v-4bb0db66></div><div class="flex items-center" data-v-4bb0db66><div class="nav" data-v-4bb0db66><nav class="nav-links" data-v-4bb0db66 data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav></div><div class="custom-nav flex items-center ml-l" data-v-4bb0db66><!----><!----><div class="custom-nav-item flex items-center ml-m" data-v-4bb0db66><!--[--><span class="devui-popper-trigger"><svg class="icon-theme" viewbox="0 0 1024 1024" width="16" height="16" data-v-6fec2a10><path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z" data-v-6fec2a10></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><a class="custom-nav-item ml-m" style="font-size:0;user-select:none;" href="https://github.com/DevCloudFE/vue-devui" target="_blank" data-v-4bb0db66><svg viewBox="0 0 20 20" width="18" height="18" data-v-4bb0db66><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" data-v-4bb0db66></path></svg></a></div></div></div></header><aside class="sidebar" data-v-06a2164a><nav class="nav-links nav" data-v-06a2164a data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-06a2164a><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/quick-start/"><!----><span class="sidebar-link-text">快速开始<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/on-demand/"><!----><span class="sidebar-link-text">按需引入<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/theme-guide/"><!----><span class="sidebar-link-text">主题定制<!----></span></a><!----></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">通用<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button/"><!----><span class="sidebar-link-text">Button 按钮<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/fullscreen/"><!----><span class="sidebar-link-text">Fullscreen 全屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon/"><!----><span class="sidebar-link-text">Icon 图标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/overlay/"><!----><span class="sidebar-link-text">Overlay 遮罩层<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/panel/"><!----><span class="sidebar-link-text">Panel 面板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/ripple/"><!----><span class="sidebar-link-text">Ripple 水波纹<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/search/"><!----><span class="sidebar-link-text">Search 搜索框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/status/"><!----><span class="sidebar-link-text">Status 状态<!----></span></a><!----></li><!----><!----></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">导航<!----></span></p><ul class="sidebar-links"><!----><!----><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dropdown/"><!----><span class="sidebar-link-text">Dropdown 下拉菜单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/menu/"><!----><span class="sidebar-link-text">Menu 菜单<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/pagination/"><!----><span class="sidebar-link-text">Pagination 分页<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tabs/"><!----><span class="sidebar-link-text">Tabs 选项卡<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">反馈<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/alert/"><!----><span class="sidebar-link-text">Alert 警告<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/drawer/"><!----><span class="sidebar-link-text">Drawer 抽屉板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/loading/"><!----><span class="sidebar-link-text">Loading 加载提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/message/"><!----><span class="sidebar-link-text">Message 全局提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/modal/"><!----><span class="sidebar-link-text">Modal 弹窗<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/notification/"><!----><span class="sidebar-link-text">Notification 全局通知<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/popover/"><!----><span class="sidebar-link-text">Popover 悬浮提示<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/result/"><!----><span class="sidebar-link-text">Result 结果<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tooltip/"><!----><span class="sidebar-link-text">Tooltip 提示<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据录入<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/auto-complete/"><!----><span class="sidebar-link-text">AutoComplete 自动补全<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/checkbox/"><!----><span class="sidebar-link-text">Checkbox 复选框<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/date-picker-pro/"><!----><span class="sidebar-link-text">DatePickerPro 日期选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editable-select/"><!----><span class="sidebar-link-text">EditableSelect 可输入下拉选择框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/form/"><!----><span class="sidebar-link-text">Form 表单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input/"><!----><span class="sidebar-link-text">Input 输入框<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-number/"><!----><span class="sidebar-link-text">InputNumber 数字输入框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/mention/"><!----><span class="sidebar-link-text">Mention 提及<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/radio/"><!----><span class="sidebar-link-text">Radio 单选框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/select/"><!----><span class="sidebar-link-text">Select 下拉框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/slider/"><!----><span class="sidebar-link-text">Slider 滑块<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/switch/"><!----><span class="sidebar-link-text">Switch 开关<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/textarea/"><!----><span class="sidebar-link-text">Textarea 多行文本框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-picker/"><!----><span class="sidebar-link-text">TimePicker 时间选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-select/"><!----><span class="sidebar-link-text">TimeSelect 时间选择器<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/upload/"><!----><span class="sidebar-link-text">Upload 上传<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据展示<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatar/"><!----><span class="sidebar-link-text">Avatar 头像<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/badge/"><!----><span class="sidebar-link-text">Badge 徽标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/card/"><!----><span class="sidebar-link-text">Card 卡片<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/collapse/"><!----><span class="sidebar-link-text">Collapse 折叠面板<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/countdown/"><!----><span class="sidebar-link-text">Countdown 倒计时<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-preview/"><!----><span class="sidebar-link-text">ImagePreview 图片预览<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/progress/"><!----><span class="sidebar-link-text">Progress 进度条<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/rate/"><!----><span class="sidebar-link-text">Rate 评分<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/skeleton/"><!----><span class="sidebar-link-text">Skeleton 骨架屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/statistic/"><!----><span class="sidebar-link-text">Statistic 统计数值<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/steps/"><!----><span class="sidebar-link-text">Steps 步骤条<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/table/"><!----><span class="sidebar-link-text">Table 表格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tag/"><!----><span class="sidebar-link-text">Tag 标签<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/timeline/"><!----><span class="sidebar-link-text">Timeline 时间轴<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tree/"><!----><span class="sidebar-link-text">Tree 树<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">布局<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/grid/"><!----><span class="sidebar-link-text">Grid 栅格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/layout/"><!----><span class="sidebar-link-text">Layout 布局<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/splitter/"><!----><span class="sidebar-link-text">Splitter 分割器<!----></span></a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-35e0cb6b><div class="container" data-v-35e0cb6b><!--[--><!--]--><div style="position:relative;" class="content" data-v-35e0cb6b><div><h1 id="accordion-手风琴" tabindex="-1">Accordion 手风琴 <a class="header-anchor" href="#accordion-手风琴" aria-hidden="true">#</a></h1><p>为页面提供导航的组件。</p><h4 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-hidden="true">#</a></h4><p>需要通过分组组织菜单的时候使用。</p><h3 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-hidden="true">#</a></h3><p>传入菜单，监听含子项的可展开菜单的开合事件(menuToggle)或可点击菜单的点击事件(itemClick)。可展开菜单默认展开使用属性 open，可点击菜单默认激活使用属性 active，禁用项使用 disabled。通过 restrictOneOpen 设置是否限制只能展开一个一级菜单。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="basic-menu"><div class="devui-accordion__menu devui-accordion--show-animate devui-scrollbar devui-accordion--menu-normal"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 1" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 1<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 1" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 1<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 2<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content " style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content <!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 2（This is a long sentence for option display.）" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 2（This is a long sentence for option display.）<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 1 (This is a long sentence for option display.)" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 1 (This is a long sentence for option display.)<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 2<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 3<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--open devui-accordion--active" title="Content 3 (Default Open)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 3 (Default Open)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--disabled" title="Child Content 1 (Disabled)" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 1 (Disabled)<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--active" title="Child Content 2 (Default Active)" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 2 (Default Active)<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 3<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 4 (No Child)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 4 (No Child)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><!--]--></ul><!----><ul class="devui-accordion__list"><!----><!----><li class="devui-accordion__item"><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--disabled" style="text-indent:20px;">没有数据</div></li><!----></ul><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--disabled" title="Content 5 (Disabled)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 5 (Disabled)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><!--]--></ul><!----><ul class="devui-accordion__list"><!----><!----><li class="devui-accordion__item"><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--disabled" style="text-indent:20px;">没有数据</div></li><!----></ul><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 6 (Dynamic Content)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 6 (Dynamic Content)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><!--]--></ul><!----><ul class="devui-accordion__list"><!----><!----><li class="devui-accordion__item"><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--disabled" style="text-indent:20px;">没有数据</div></li><!----></ul><!--]--></div><!--]--></div><!----></li><!--]--></ul><!----><!----><!--]--></div></div><div class="basic-option"><div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper" style="background:;border-color:;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div> Only one level-1 menu can be expanded. <!--限制只能展开一个一级菜单--></div><div class="basic-option"><div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper" style="background:;border-color:;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div> Embedded menu (no shadow) <!--内嵌菜单形式（无阴影）--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-accordion</span>
      <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:accordionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>accordionTypeEmbed ? &#39;embed&#39; : &#39;normal&#39;<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:restrictOneOpen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>restrictOneOpen<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@itemClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemClick<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@menuToggle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menuToggle<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:loadingTemplate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#loadingTemplate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item, deepth }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>devui-accordion-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>devui-accordion-item-title devui-over-flow-ellipsis<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token property">textIndent</span><span class="token punctuation">:</span> deepth * 20 + <span class="token string">&#39;px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>自定义加载...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-accordion</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-option<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>restrictOneOpen<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-switch</span><span class="token punctuation">&gt;</span></span>
    Only one level-1 menu can be expanded.
    <span class="token comment">&lt;!--限制只能展开一个一级菜单--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basic-option<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>accordionTypeEmbed<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-switch</span><span class="token punctuation">&gt;</span></span>
    Embedded menu (no shadow)
    <span class="token comment">&lt;!--内嵌菜单形式（无阴影）--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;accordion&#39;</span><span class="token punctuation">,</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> restrictOneOpen <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> accordionTypeEmbed <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content &#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 2（This is a long sentence for option display.）&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1 (This is a long sentence for option display.)&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 3 (Default Open)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1 (Disabled)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2 (Default Active)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 4 (No Child)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 5 (Disabled)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 6 (Dynamic Content)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">needLoadChildren</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">itemClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;item click&#39;</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">menuToggle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;menu toggle&#39;</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>open <span class="token operator">&amp;&amp;</span> event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>needLoadChildren<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
          event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>needLoadChildren <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
          event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      menu<span class="token punctuation">,</span>
      restrictOneOpen<span class="token punctuation">,</span>
      accordionTypeEmbed<span class="token punctuation">,</span>
      itemClick<span class="token punctuation">,</span>
      menuToggle<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.basic-menu</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.basic-option</span> <span class="token punctuation">{</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.basic-option &gt; d-toggle</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>3px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">.basic-menu</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="使用内置路由和链接类型" tabindex="-1">使用内置路由和链接类型 <a class="header-anchor" href="#使用内置路由和链接类型" aria-hidden="true">#</a></h3><p>通过设置 linkType 切换不同的内置路由和链接类型：默认类型&#39;&#39;；路由类型&#39;routerLink&#39;；外链类型：&#39;hrefLink&#39;；基于数据判断路由或链接类型：&#39;dependOnLinkTypeKey&#39;。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="menu-container"><div class="menu-wrapper"><div> router link (recommended) <!--路由链接（推荐使用）--></div><div class="devui-accordion__menu devui-accordion--show-animate devui-scrollbar devui-accordion--menu-normal menu"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Basic" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Basic<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/accordion/" target="_self" class="devui-accordion--overflow-ellipsis" title="Accordion"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Accordion<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/anchor/" target="_self" class="devui-accordion--overflow-ellipsis" title="Anchor"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Anchor<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/button/" target="_self" class="devui-accordion--overflow-ellipsis" title="Button"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Button<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Advanced" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Advanced<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!--[--><div class="devui-accordion__item-title devui-accordion--disabled" style="text-indent:20px;"><!----><a class="devui-accordion--overflow-ellipsis" title="Data Table (disabled)"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Data Table (disabled)<!--]--><!----><!--]--></a></div><!--]--><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/dragdrop/?query=foo#bar" target="_self" class="devui-accordion--overflow-ellipsis" title="Drag Drop (parameter example)"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Drag Drop (parameter example)<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Others" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Others<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/icon/" target="_self" class="devui-accordion--overflow-ellipsis" title="Icon Library"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Icon Library<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!--[--><div class="devui-accordion__item-title devui-accordion--disabled" style="text-indent:20px;"><!----><a class="devui-accordion--overflow-ellipsis" title="Home Page"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Home Page<!--]--><!----><!--]--></a></div><!--]--><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><!--]--></ul><!----><!----><!--]--></div></div><div class="menu-wrapper"><div> original hyperlink (cross site scene) <!--原生超链接（涉及跨站场景使用）--></div><div class="devui-accordion__menu devui-accordion--show-animate devui-scrollbar devui-accordion--menu-normal menu"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Basic" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Basic<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><a href="/components/alert/" target="_self" class="devui-accordion--overflow-ellipsis" title="Alert"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Alert<!--]--><!----><!--]--></a><!----></div><!--]--><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><a href="/components/anchor/" target="_self" class="devui-accordion--overflow-ellipsis" title="Anchor"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Anchor<!--]--><!----><!--]--></a><!----></div><!--]--><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><a href="/components/accordion/" target="_self" class="devui-accordion--overflow-ellipsis" title="Accordion"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Accordion<!--]--><!----><!--]--></a><!----></div><!--]--><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Advanced" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Advanced<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!----><!--[--><div class="devui-accordion__item-title devui-accordion--disabled" style="text-indent:20px;"><!----><a class="devui-accordion--overflow-ellipsis" title="Data Table (disabled)"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Data Table (disabled)<!--]--><!----><!--]--></a></div><!--]--><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><a href="/components/dragdrop/" target="_self" class="devui-accordion--overflow-ellipsis" title="Drag Drop"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Drag Drop<!--]--><!----><!--]--></a><!----></div><!--]--><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Others" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Others<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><a href="/components/icon/" target="_self" class="devui-accordion--overflow-ellipsis" title="Icon Library"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Icon Library<!--]--><!----><!--]--></a><!----></div><!--]--><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><a href="/" target="_blank" class="devui-accordion--overflow-ellipsis" title="Home Page(open blank page)"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Home Page(open blank page)<!--]--><!----><!--]--></a><!----></div><!--]--><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><!--]--></ul><!----><!----><!--]--></div></div><div class="menu-wrapper"><div> mix link (partial cross site scene) <!--混合链接（部分涉及跨站场景使用）--></div><div class="devui-accordion__menu devui-accordion--show-animate devui-scrollbar devui-accordion--menu-normal menu"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Basic" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Basic<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!----><!----><!--[--><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/alert/" target="_self" class="devui-accordion--overflow-ellipsis" title="Alert"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Alert<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!----><!----><!--[--><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/anchor/" target="_self" class="devui-accordion--overflow-ellipsis" title="Anchor"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Anchor<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!----><!----><!--[--><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/button/" target="_self" class="devui-accordion--overflow-ellipsis" title="Button"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Button<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Advanced" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Advanced<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!----><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--disabled" style="text-indent:20px;"><!----><a class="devui-accordion--overflow-ellipsis" title="Data Table (disabled)"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Data Table (disabled)<!--]--><!----><!--]--></a></div><!--]--><!----><!----><!--]--><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!----><!----><!--[--><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/dragdrop/" target="_self" class="devui-accordion--overflow-ellipsis" title="Drag Drop"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Drag Drop<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Others" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Others<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!----><!----><!----><!--[--><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><!--[--><!----><a href="/components/icon/" target="_self" class="devui-accordion--overflow-ellipsis" title="Icon Library"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Icon Library<!--]--><!----><!--]--></a><!--]--><!----></div><!--]--><!----><!----><!--]--><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!----><!----><!----><!--[--><!----><!--[--><div class="devui-accordion__item-title" style="text-indent:20px;"><a href="/" target="_self" class="devui-accordion--overflow-ellipsis" title="Home Page(External link open in this window)"><!--[--><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Home Page(External link open in this window)<!--]--><!----><!--]--></a><!----></div><!--]--><!----><!--]--><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><!--]--></ul><!----><!----><!--]--></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        router link (recommended)
        <span class="token comment">&lt;!--路由链接（推荐使用）--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-accordion</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span> <span class="token attr-name">linkType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>routerLink<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-accordion</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        original hyperlink (cross site scene)
        <span class="token comment">&lt;!--原生超链接（涉及跨站场景使用）--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-accordion</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span> <span class="token attr-name">linkType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hrefLink<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-accordion</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        mix link (partial cross site scene)
        <span class="token comment">&lt;!--混合链接（部分涉及跨站场景使用）--&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-accordion</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span> <span class="token attr-name">linkType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dependOnLinkTypeKey<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-accordion</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;accordion&#39;</span><span class="token punctuation">,</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> menu1 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Basic&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Accordion&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/accordion/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Anchor&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/anchor/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Button&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/button/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Advanced&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Data Table (disabled)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/datatable/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Drag Drop (parameter example)&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/dragdrop/?query=foo#bar&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Others&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Icon Library&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/icon/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Home Page&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> menu2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Basic&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Alert&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/alert/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;_self&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Anchor&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/anchor/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;_self&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Accordion&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/accordion/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;_self&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Advanced&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Data Table (disabled)&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/datatable/&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;_self&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Drag Drop&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/dragdrop/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;_self&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Others&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Icon Library&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/icon/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;_self&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Home Page(open blank page)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">&#39;_blank&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> menu3 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Basic&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Alert&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/alert/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">linkType</span><span class="token operator">:</span> <span class="token string">&#39;routerLink&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Anchor&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/anchor/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">linkType</span><span class="token operator">:</span> <span class="token string">&#39;routerLink&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Button&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/button/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">linkType</span><span class="token operator">:</span> <span class="token string">&#39;routerLink&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Advanced&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Data Table (disabled)&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/datatable/&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">linkType</span><span class="token operator">:</span> <span class="token string">&#39;routerLink&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Drag Drop&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/dragdrop/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">linkType</span><span class="token operator">:</span> <span class="token string">&#39;routerLink&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Others&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Icon Library&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/components/icon/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">linkType</span><span class="token operator">:</span> <span class="token string">&#39;routerLink&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Home Page(External link open in this window)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">linkType</span><span class="token operator">:</span> <span class="token string">&#39;hrefLink&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      menu1<span class="token punctuation">,</span>
      menu2<span class="token punctuation">,</span>
      menu3<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.menu</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.menu-container</span> <span class="token punctuation">{</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.menu-wrapper</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.menu-wrapper + .menu-wrapper</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">:host::after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1100px<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1280px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1480px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">.menu-wrapper</span> <span class="token punctuation">{</span>
    <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.menu-wrapper + .menu-wrapper</span> <span class="token punctuation">{</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">margin-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">.menu</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token selector">.menu-wrapper &gt; div</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="使用模板" tabindex="-1">使用模板 <a class="header-anchor" href="#使用模板" aria-hidden="true">#</a></h3><p>可展开菜单和可点击菜单分别使用模板。可展开菜单指定 menuItemTemplate，可点击菜单指定 itemTemplate。没有数据模板指定 noContentTemplate，并可以通过 showNoContent 控制无数据的时候不展开。 加载中模板指定 loadingTemplate，通过 item 的 loadingKey 对应的属性值控制是否显示加载中。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="use-template-menu"><div class="devui-accordion__menu devui-accordion--show-animate devui-scrollbar devui-accordion--menu-normal"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--open" title="Content 1" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!----><!--[-->Content 1 <span class="use-template-badge">2</span><!--v-if--><!--]--><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 1" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 1 <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 2 <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 2" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!----><!--[-->Content 2 <span class="use-template-badge">4</span><!--v-if--><!--]--><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 1" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 1 <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 2 <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 3 <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 4" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 4 <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 3" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!----><!--[-->Content 3 <span class="use-template-badge">3</span><!--v-if--><!--]--><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--disabled" title="Child Content 1 (disabled)" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 1 (disabled) <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 2 <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!----><!--[-->Child Content 3 <span class="use-template-info">(Click Count: 0)</span><!--]--></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 4 (Custom No Data Template)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!----><!--[-->Content 4 (Custom No Data Template) <!--v-if--><!--v-if--><!--]--><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><!--]--></ul><!----><ul class="devui-accordion__list"><!----><!----><!----><!--[--><li class="devui-accordion-item disabled"><div class="devui-accordion-item-title devui-over-flow-ellipsis disabled" style="{{ text-indent:deepth * 20 + &#39;px&#39; }};"> Not available yet. Please wait. <!--尚未开放，敬请期待...--></div></li><!--]--></ul><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 5 (Custom loading Template)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!----><!--[-->Content 5 (Custom loading Template) <!--v-if--><!--v-if--><!--]--><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><!--]--></ul><!----><ul class="devui-accordion__list"><!----><!----><!----><!--[--><li class="devui-accordion-item disabled"><div class="devui-accordion-item-title devui-over-flow-ellipsis disabled" style="{{ text-indent:deepth * 20 + &#39;px&#39; }};"> Not available yet. Please wait. <!--尚未开放，敬请期待...--></div></li><!--]--></ul><!--]--></div><!--]--></div><!----></li><!--]--></ul><!----><!----><!--]--></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>use-template-menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-accordion</span>
      <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:accordionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>accordionTypeEmbed ? &#39;embed&#39; : &#39;normal&#39;<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:restrictOneOpen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>restrictOneOpen<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@itemClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>itemClick<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@menuToggle</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menuToggle<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#menuItemTemplate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item, deepth, parent }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ item.title }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>use-template-badge<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.children?.length<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          {{ item.children.length }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>operation-clear<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.needLoadChildren === false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clearChildrenData($event, item)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          reset
          <span class="token comment">&lt;!--重置--&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#itemTemplate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item, deepth, parent }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ item.title }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>use-template-info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>(Click Count: {{ item.clicktimes || &#39;0&#39; }})<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#noContentTemplate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ deepth }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>devui-accordion-item disabled<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>devui-accordion-item-title devui-over-flow-ellipsis disabled<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token property">textIndent</span><span class="token punctuation">:</span> deepth * 20 + <span class="token string">&#39;px&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
            Not available yet. Please wait.
            <span class="token comment">&lt;!--尚未开放，敬请期待...--&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#loadingTemplate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>devui-accordion-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>use-template-loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>use-template-circle-spinner<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            loading...
            <span class="token comment">&lt;!--正在用力地加载中...--&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-accordion</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;accordion&#39;</span><span class="token punctuation">,</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> restrictOneOpen <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> accordionTypeEmbed <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 4&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 3&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1 (disabled)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 4 (Custom No Data Template)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 可展开菜单节点必须有children非undefined</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 5 (Custom loading Template)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">needLoadChildren</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> childrenData <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 4&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 5&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 6&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 7&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">itemClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>clicktimes <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>clicktimes <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">menuToggle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>open <span class="token operator">&amp;&amp;</span> event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>needLoadChildren<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>children <span class="token operator">=</span> childrenData<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
          event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>needLoadChildren <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
          event<span class="token punctuation">.</span>item<span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">clearChildrenData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      event<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      item<span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      item<span class="token punctuation">.</span>needLoadChildren <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
      item<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      menu<span class="token punctuation">,</span>
      restrictOneOpen<span class="token punctuation">,</span>
      accordionTypeEmbed<span class="token punctuation">,</span>
      itemClick<span class="token punctuation">,</span>
      menuToggle<span class="token punctuation">,</span>
      clearChildrenData<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.use-template-menu</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.use-template-badge</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #5e7ce0<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.use-template-loading</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.use-template-circle-spinner</span> <span class="token punctuation">{</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> circle infinite 0.75s linear<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #5e7ce0<span class="token punctuation">;</span>
  <span class="token property">border-top-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> circle</span> <span class="token punctuation">{</span>
  <span class="token selector">0%</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">100%</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">.use-template-menu</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><p>内部列表通过制定 innerListTemplate 使用模板。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="inner-template-menu"><div class="devui-accordion__menu devui-accordion--show-animate devui-scrollbar devui-accordion--menu-normal"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 1" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 1<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><!----><!--[--><div class="devui-accordion-submenu devui-accordion-show-animate inner-template-my-menu">Child Content of Content 1</div><!--]--><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 2" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 2<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><!----><!--[--><div class="devui-accordion-submenu devui-accordion-show-animate inner-template-my-menu">Child Content of Content 2</div><!--]--><!----><!--]--></div><!--]--></div><!----></li><!--]--></ul><!----><!----><!--]--></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inner-template-menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-accordion</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:accordionType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>accordionTypeEmbed ? &#39;embed&#39; : &#39;normal&#39;<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:restrictOneOpen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>restrictOneOpen<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#innerListTemplate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ item, deepth }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>devui-accordion-submenu devui-accordion-show-animate inner-template-my-menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          {{ item.content }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-accordion</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;accordion&#39;</span><span class="token punctuation">,</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> restrictOneOpen <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> accordionTypeEmbed <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">&#39;Child Content of Content 1&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">&#39;Child Content of Content 2&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      menu<span class="token punctuation">,</span>
      restrictOneOpen<span class="token punctuation">,</span>
      accordionTypeEmbed<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.inner-template-menu</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.inner-template-my-menu</span> <span class="token punctuation">{</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">.inner-template-menu</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="复合层级和自动展开" tabindex="-1">复合层级和自动展开 <a class="header-anchor" href="#复合层级和自动展开" aria-hidden="true">#</a></h3><p>支持多层级和不限制嵌套层级。可以独立使用 autoOpenActiveMenu 使得激活的菜单的父层级自动展开。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="multi-child-menu"><div class="devui-accordion__menu devui-accordion--show-animate devui-scrollbar devui-accordion--menu-normal"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 1 (as a leaf menu)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 1 (as a leaf menu)<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 2 (as a parent menu, has children)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 2 (as a parent menu, has children)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 1" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 1<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 2<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 3<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--active" title="Content 3 (as a parent menu, has children)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 3 (as a parent menu, has children)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--active" title="Child Content 1 (has children)" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 1 (has children)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 1" style="text-indent:40px;"><div class="devui-accordion__splitter" style="left:50px;"></div><!--[-->Child Content 1<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--active" title="Child Content 2" style="text-indent:40px;"><div class="devui-accordion__splitter" style="left:50px;"></div><!--[-->Child Content 2<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:40px;"><div class="devui-accordion__splitter" style="left:50px;"></div><!--[-->Child Content 3<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2 (has children" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 2 (has children<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 1" style="text-indent:40px;"><div class="devui-accordion__splitter" style="left:50px;"></div><!--[-->Child Content 1<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2 (has children" style="text-indent:40px;"><div class="devui-accordion__splitter" style="left:50px;"></div><!--[-->Child Content 2 (has children<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 1" style="text-indent:60px;"><div class="devui-accordion__splitter" style="left:70px;"></div><!--[-->Child Content 1<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2" style="text-indent:60px;"><div class="devui-accordion__splitter" style="left:70px;"></div><!--[-->Child Content 2<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:60px;"><div class="devui-accordion__splitter" style="left:70px;"></div><!--[-->Child Content 3<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:40px;"><div class="devui-accordion__splitter" style="left:50px;"></div><!--[-->Child Content 3<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 2" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 2<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 3<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 4 (as a parent menu, has no child)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 4 (as a parent menu, has no child)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion--menu-hidden devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><!--]--></ul><!----><ul class="devui-accordion__list"><!----><!----><li class="devui-accordion__item"><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--disabled" style="text-indent:20px;">没有数据</div></li><!----></ul><!--]--></div><!--]--></div><!----></li><!--]--></ul><!----><!----><!--]--></div></div><div class="multi-child-option"><div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper" style="background:;border-color:;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div> auto expend active menu <!--自动展开激活的菜单--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>multi-child-menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-accordion</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:autoOpenActiveMenu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoOpenActiveMenu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-accordion</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>multi-child-option<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoOpenActiveMenu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-switch</span><span class="token punctuation">&gt;</span></span>
    auto expend active menu
    <span class="token comment">&lt;!--自动展开激活的菜单--&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;accordion&#39;</span><span class="token punctuation">,</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> autoOpenActiveMenu <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 1 (as a leaf menu)&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 2 (as a parent menu, has children)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 3 (as a parent menu, has children)&#39;</span><span class="token punctuation">,</span>

        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1 (has children)&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2 (has children&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2 (has children&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;Content 4 (as a parent menu, has no child)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      menu<span class="token punctuation">,</span>
      autoOpenActiveMenu<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.multi-child-menu</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.multi-child-option</span> <span class="token punctuation">{</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.multi-child-option &gt; d-toggle</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>3px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">.multi-child-menu</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="改变键值" tabindex="-1">改变键值 <a class="header-anchor" href="#改变键值" aria-hidden="true">#</a></h3><p>通过 titleKey,childrenKey,disabledKey,activeKey 等等改变数组键值，适配不同的接口类型定义。</p><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="change-key-menu"><div class="devui-accordion__menu devui-accordion--show-animate devui-scrollbar devui-accordion--menu-normal"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Content 1" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 1<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><div class="devui-accordion__menu-item"><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--open devui-accordion--active" title="Content 2 (expended)" style="text-indent:0px;"><div class="devui-accordion__splitter devui-accordion__parent-list" style="left:10px;"></div><!--[-->Content 2 (expended)<!--]--><!----><span class="devui-accordion__open-icon"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088           7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124           3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6           L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-accordion__submenu devui-accordion--show-animate"><!--[--><ul class="devui-accordion__list"><!--[--><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--disabled" title="Child Content 1 (disabled)" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 1 (disabled)<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis devui-accordion--active" title="Child Content 2 (active)" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 2 (active)<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><li class="devui-accordion__item"><!----><!--[--><!--[--><div class="devui-accordion__item-title devui-accordion--overflow-ellipsis" title="Child Content 3" style="text-indent:20px;"><div class="devui-accordion__splitter" style="left:30px;"></div><!--[-->Child Content 3<!--]--><!----></div><!--]--><!----><!----><!----><!--]--></li><!--]--></ul><!----><!----><!--]--></div><!--]--></div><!----></li><!--]--></ul><!----><!----><!--]--></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>change-key-menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-accordion</span>
      <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>menu<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:titleKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>key?.titleKey<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:activeKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>key?.activeKey<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:disabledKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>key?.disabledKey<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:openKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>key?.openKey<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:childrenKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>key?.childrenKey<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-accordion</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;accordion&#39;</span><span class="token punctuation">,</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">titleKey</span><span class="token operator">:</span> <span class="token string">&#39;value&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">activeKey</span><span class="token operator">:</span> <span class="token string">&#39;$selected&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">disabledKey</span><span class="token operator">:</span> <span class="token string">&#39;forbidden&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">openKey</span><span class="token operator">:</span> <span class="token string">&#39;$show&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">childrenKey</span><span class="token operator">:</span> <span class="token string">&#39;subs&#39;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> menu <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;Content 1&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;Content 2 (expended)&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">$show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">subs</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 1 (disabled)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">forbidden</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 2 (active)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">$selected</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;Child Content 3&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      menu<span class="token punctuation">,</span>
      key<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.change-key-menu</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">.change-key-menu</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="accordion-参数" tabindex="-1">Accordion 参数 <a class="header-anchor" href="#accordion-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">data</td><td style="text-align:left;"><code>Array&lt;any&gt; | AccordionMenuType</code></td><td style="text-align:left;">--</td><td style="text-align:left;">必选，数据源，可以自定义数组或者使用预设的<code>AccordionMenuType</code></td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">titleKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;title&#39;</td><td style="text-align:left;">可选，标题的属性名，item[titleKey]类型为<code>string</code>，为标题显示内容</td><td style="text-align:left;"><a href="#%E6%94%B9%E5%8F%98%E9%94%AE%E5%80%BC">改变键值</a></td></tr><tr><td style="text-align:left;">loadingKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;loading&#39;</td><td style="text-align:left;">可选，子菜单是否加载中的判断属性名，item[loadingKey]类型为<code>boolean</code></td><td style="text-align:left;"><a href="#%E6%94%B9%E5%8F%98%E9%94%AE%E5%80%BC">改变键值</a></td></tr><tr><td style="text-align:left;">childrenKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;children&#39;</td><td style="text-align:left;">可选，子菜单的属性名，item[childrenKey]类型为<code>Array&lt;any&gt;</code></td><td style="text-align:left;"><a href="#%E6%94%B9%E5%8F%98%E9%94%AE%E5%80%BC">改变键值</a></td></tr><tr><td style="text-align:left;">disabledKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;disabled&#39;</td><td style="text-align:left;">可选，是否禁用的属性名，item[disabledKey]类型为<code>boolean</code></td><td style="text-align:left;"><a href="#%E6%94%B9%E5%8F%98%E9%94%AE%E5%80%BC">改变键值</a></td></tr><tr><td style="text-align:left;">activeKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;active&#39;</td><td style="text-align:left;">可选，子菜单是否激活的属性名，item[activeKey]类型为<code>boolean</code></td><td style="text-align:left;"><a href="#%E6%94%B9%E5%8F%98%E9%94%AE%E5%80%BC">改变键值</a></td></tr><tr><td style="text-align:left;">openKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;open&#39;</td><td style="text-align:left;">可选，菜单是否展开的属性名，item[openKey]类型为<code>boolean</code></td><td style="text-align:left;"><a href="#%E6%94%B9%E5%8F%98%E9%94%AE%E5%80%BC">改变键值</a></td></tr><tr><td style="text-align:left;">restrictOneOpen</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，限制一级菜单同时只能打开一个， 默认不限制</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">menuItemTemplate</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选， 可展开菜单内容条模板，可用变量值见下</td><td style="text-align:left;"><a href="#%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF">使用模板</a></td></tr><tr><td style="text-align:left;">itemTemplate</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，可点击菜单内容条模板，可用变量值见下</td><td style="text-align:left;"><a href="#%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF">使用模板</a></td></tr><tr><td style="text-align:left;">noContentTemplate</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，没有内容的时候使用自定义模板，可用变量值见下</td><td style="text-align:left;"><a href="#%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF">使用模板</a></td></tr><tr><td style="text-align:left;">loadingTemplate</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，加载中使用自定义模板，可用变量值见下</td><td style="text-align:left;"><a href="#%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF">使用模板</a></td></tr><tr><td style="text-align:left;">innerListTemplate</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，子列表内容完全自定义，用做折叠面板，可用变量值见下</td><td style="text-align:left;"><a href="#%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF">使用模板</a></td></tr><tr><td style="text-align:left;">linkType</td><td style="text-align:left;"><code>&#39;routerLink&#39;|&#39;hrefLink&#39;|&#39;dependOnLinkTypeKey&#39;|&#39;&#39;</code></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">可选，<code>&#39;routerLink&#39;</code>为路由场景；<code>&#39;hrefLink&#39;</code>为外部链接场景；<code>&#39;dependOnLinkTypeKey&#39;</code>为动态路由或外部链接场景；<code>&#39;&#39;</code>为默认非链接类型（无法右键打开新标签页）</td><td style="text-align:left;"><a href="#%E5%86%85%E7%BD%AE%E8%B7%AF%E7%94%B1%E5%92%8C%E9%93%BE%E6%8E%A5%E7%B1%BB%E5%9E%8B">内置路由和链接类型</a></td></tr><tr><td style="text-align:left;">linkTypeKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;linkType&#39;</td><td style="text-align:left;">可选，链接内容的类型的 key 值，用于 linkType 为<code>&#39;dependOnLinkTypeKey&#39;</code>时指定对象链接类型属性名，item[linkTypeKey]类型为<code>&#39;routerLink&#39;|&#39;hrefLink&#39;| string</code>，其中<code>&#39;routerLink&#39;</code>为路由链接，<code>&#39;hrefLink&#39;</code>为外部链接，其他为默认非链接类型</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">linkKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;link&#39;</td><td style="text-align:left;">可选，链接内容的 key，用于 linkType 为连接类型记非<code>&#39;&#39;</code>时，链接的取值的属性值，item[linkKey]为路由地址或者超链接地址</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">linkTargetKey</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;target&#39;</td><td style="text-align:left;">可选，链接目标窗口的 key，用于链接类型，item[linkTargetKey]为单个链接的目标窗口</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">linkDefaultTarget</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;_self&#39;</td><td style="text-align:left;">可选，不设置 target 的时候 target 默认值为<code>&#39;_self&#39;</code>，用于链接类型, 取值等同于 a 链接的 target 属性</td><td style="text-align:left;"><a href="#%E5%86%85%E7%BD%AE%E8%B7%AF%E7%94%B1%E5%92%8C%E9%93%BE%E6%8E%A5%E7%B1%BB%E5%9E%8B">内置路由和链接类型</a></td></tr><tr><td style="text-align:left;">autoOpenActiveMenu</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否自动展开带有活跃子项的菜单</td><td style="text-align:left;"><a href="#%E5%A4%8D%E5%90%88%E5%B1%82%E7%BA%A7%E5%92%8C%E8%87%AA%E5%8A%A8%E5%B1%95%E5%BC%80">复合层级和自动展开</a></td></tr><tr><td style="text-align:left;">accordionType</td><td style="text-align:left;"><code>&#39;normal&#39;|&#39;embed&#39;</code></td><td style="text-align:left;">&#39;normal&#39;</td><td style="text-align:left;">可选，菜单形式是普通（带阴影）还是内嵌（不带阴影）</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">showAnimation</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">true</td><td style="text-align:left;">可选，是否展示动画</td><td style="text-align:left;"><a href="#%E5%86%85%E7%BD%AE%E8%B7%AF%E7%94%B1%E5%92%8C%E9%93%BE%E6%8E%A5%E7%B1%BB%E5%9E%8B">内置路由和链接类型</a></td></tr></tbody></table><h3 id="accordion-事件" tabindex="-1">Accordion 事件 <a class="header-anchor" href="#accordion-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">menuToggle</td><td style="text-align:left;"><code>EventEmitter&lt;</code><a href="#accordionmenutoggleevent"><code>AccordionMenuToggleEvent</code></a><code>&gt;</code></td><td style="text-align:left;">可选，可展开菜单展开事件，返回对象里属性 item 为点击的对象数据，open 为 true 则将要展开 false 则将要关闭， parent 为父对象数据，event 为点击事件的原生事件</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">itemClick</td><td style="text-align:left;"><code>EventEmitter&lt;</code><a href="#accordionitemclickevent"><code>AccordionItemClickEvent</code></a><code>&gt;</code></td><td style="text-align:left;">可选，可点击菜单点击事件，返回对象里属性 item 为点击的对象数据，preActive 对象为上一次展开的对象， parent 为父对象数据，event 为点击事件的原生事件</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">activeItemChange</td><td style="text-align:left;"><code>EventEmitter&lt;any&gt;</code></td><td style="text-align:left;">可选，子项切换的时候会发出新激活的子项的数据</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr></tbody></table><h3 id="accordion-类型定义" tabindex="-1">Accordion 类型定义 <a class="header-anchor" href="#accordion-类型定义" aria-hidden="true">#</a></h3><div class="language-typescript"><pre><code><span class="token comment">/* 基础数据类型 */</span>
<span class="token keyword">type</span> <span class="token class-name">AccordionMenuItemLinkType</span> <span class="token operator">=</span> <span class="token string">&#39;routerLink&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;hrefLink&#39;</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionBase</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token punctuation">[</span>prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">IAccordionActiveable</span> <span class="token punctuation">{</span>
  active<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">IAccordionFoldable<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
  open<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  loading<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  children<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">IAccordionLinkable</span> <span class="token punctuation">{</span>
  link<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  target<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  linkType<span class="token operator">?</span><span class="token operator">:</span> AccordionMenuItemLinkType<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionBaseItem</span> <span class="token keyword">extends</span> <span class="token class-name">AccordionBase</span><span class="token punctuation">,</span> IAccordionActiveable <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionBaseMenu<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token keyword">extends</span> <span class="token class-name">AccordionBase</span><span class="token punctuation">,</span> IAccordionFoldable<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionLinkableItem</span> <span class="token keyword">extends</span> <span class="token class-name">AccordionBase</span><span class="token punctuation">,</span> IAccordionActiveable<span class="token punctuation">,</span> IAccordionLinkable <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionMenuItem</span> <span class="token keyword">extends</span> <span class="token class-name">AccordionBase</span><span class="token punctuation">,</span> IAccordionActiveable<span class="token punctuation">,</span> IAccordionFoldable<span class="token operator">&lt;</span>AccordionMenuItem<span class="token operator">&gt;</span><span class="token punctuation">,</span> IAccordionLinkable <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">type</span> <span class="token class-name">AccordionMenuType</span> <span class="token operator">=</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>AccordionMenuItem<span class="token operator">&gt;</span><span class="token punctuation">;</span>

<span class="token comment">/* 基础事件类型 */</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionMenuToggleEvent</span> <span class="token punctuation">{</span>
  item<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  open<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  parent<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  event<span class="token operator">:</span> MouseEvent<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionItemClickEvent</span> <span class="token punctuation">{</span>
  item<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  prevActiveItem<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  parent<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  event<span class="token operator">:</span> MouseEvent<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 废弃接口 */</span>
<span class="token comment">/** @deprecated  merge into `AccordionMenuItem`*/</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionSubMenuItem</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  active<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token punctuation">[</span>prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/** @deprecated  use `AccordionLinkableItem` instead*/</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionSubMenuItemHrefLink</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  link<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  target<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  active<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token punctuation">[</span>prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/** @deprecated  use `AccordionLinkableItem` instead*/</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionSubMenuItemRouterLink</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  link<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  target<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  active<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token punctuation">[</span>prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/** @deprecated  use `AccordionLinkableItem` instead*/</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">AccordionSubMenuItemDynamicLink</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  link<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  linkType<span class="token operator">:</span> <span class="token string">&#39;routerLink&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;hrefLink&#39;</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  target<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  active<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  <span class="token punctuation">[</span>prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="accordionprops" tabindex="-1">AccordionProps <a class="header-anchor" href="#accordionprops" aria-hidden="true">#</a></h3><div class="language-typescript"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ExtractPropTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AccordionMenuType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./accordion.type&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> accordionProps <span class="token operator">=</span> <span class="token punctuation">{</span>
  data<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token builtin">Array</span> <span class="token keyword">as</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span> <span class="token operator">|</span> AccordionMenuType<span class="token punctuation">,</span>
    <span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/* Key值定义, 用于自定义数据结构 */</span>
  titleKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;title&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 标题的key，item[titleKey]类型为string，为标题显示内容</span>
  loadingKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;loading&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 子菜单动态加载item[loadingKey]类型为boolean</span>
  childrenKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;children&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 子菜单Key</span>
  disabledKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;disabled&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 是否禁用Key</span>
  activeKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;active&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 菜单是否激活/选中</span>
  openKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;open&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 菜单是否打开</span>

  <span class="token comment">/* 菜单模板 */</span>
  menuItemTemplate<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 可展开菜单内容条模板</span>
  itemTemplate<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 可点击菜单内容条模板</span>

  menuToggle<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token builtin">Function</span> <span class="token keyword">as</span> <span class="token builtin">unknown</span> <span class="token keyword">as</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>event<span class="token operator">:</span> MouseEvent<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
    <span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 可展开菜单展开事件</span>
  itemClick<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token builtin">Function</span> <span class="token keyword">as</span> <span class="token builtin">unknown</span> <span class="token keyword">as</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>event<span class="token operator">:</span> MouseEvent<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
    <span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 可点击菜单点击事件</span>
  activeItemChange<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token builtin">Function</span> <span class="token keyword">as</span> <span class="token builtin">unknown</span> <span class="token keyword">as</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>event<span class="token operator">:</span> MouseEvent<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
    <span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/** 高级选项和模板 */</span>
  restrictOneOpen<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 限制一级菜单同时只能打开一个</span>
  autoOpenActiveMenu<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 自动展开活跃菜单</span>
  showNoContent<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 没有内容的时候是否显示没有数据</span>
  noContentTemplate<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 没有内容的时候使用自定义模板</span>
  loadingTemplate<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 加载中使用自定义模板</span>
  innerListTemplate<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 可折叠菜单内容完全自定义，用做折叠面板</span>

  <span class="token comment">/* 内置路由/链接/动态判断路由或链接类型 */</span>
  linkType<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> String <span class="token keyword">as</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">&#39;routerLink&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;hrefLink&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;dependOnLinkTypeKey&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;&#39;</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
    <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  linkTypeKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;linkType&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// linkType为&#39;dependOnLinkTypeKey&#39;时指定对象linkType定义区</span>
  linkKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;link&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 链接内容的key</span>
  linkTargetKey<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;target&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 链接目标窗口的key</span>
  linkDefaultTarget<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;_self&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 不设置target的时候target默认值</span>

  accordionType<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> String <span class="token keyword">as</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">&#39;normal&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;embed&#39;</span><span class="token punctuation">,</span>
    <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&#39;normal&#39;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token keyword">as</span> <span class="token keyword">const</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">type</span> <span class="token class-name">AccordionProps</span> <span class="token operator">=</span> ExtractPropTypes<span class="token operator">&lt;</span><span class="token keyword">typeof</span> accordionProps<span class="token operator">&gt;</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="模板可以用变量值-使用方法如下" tabindex="-1">模板可以用变量值(使用方法如下) <a class="header-anchor" href="#模板可以用变量值-使用方法如下" aria-hidden="true">#</a></h3><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#templateName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{item}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="menuitemtemplate-可用变量值" tabindex="-1">menuItemTemplate 可用变量值 <a class="header-anchor" href="#menuitemtemplate-可用变量值" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:center;">变量</th><th style="text-align:center;">类型</th><th style="text-align:center;">变量含义说明</th></tr></thead><tbody><tr><td style="text-align:center;">item</td><td style="text-align:center;"><code>any</code></td><td style="text-align:center;">可展开类型菜单数据</td></tr><tr><td style="text-align:center;">deepth</td><td style="text-align:center;"><code>number</code></td><td style="text-align:center;">表示嵌套结构层级</td></tr><tr><td style="text-align:center;">parent</td><td style="text-align:center;"><code>any</code></td><td style="text-align:center;">所属父级菜单数据</td></tr><tr><td style="text-align:center;">~<s>titleKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 titleKey 值</s>~</td></tr><tr><td style="text-align:center;">~<s>disabledKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 disabledKey 值</s>~</td></tr><tr><td style="text-align:center;">~<s>openKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 openKey 值</s>~</td></tr><tr><td style="text-align:center;">~<s>menuToggleFn</s>~</td><td style="text-align:center;"><code>Function</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>参数应为 item，表示一级菜单被点击</s>~</td></tr></tbody></table><h3 id="itemtemplate-可用变量值" tabindex="-1">itemTemplate 可用变量值 <a class="header-anchor" href="#itemtemplate-可用变量值" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:center;">变量</th><th style="text-align:center;">类型</th><th style="text-align:center;">变量含义说明</th></tr></thead><tbody><tr><td style="text-align:center;">item</td><td style="text-align:center;"><code>any</code></td><td style="text-align:center;">可点击类型菜单数据</td></tr><tr><td style="text-align:center;">deepth</td><td style="text-align:center;"><code>number</code></td><td style="text-align:center;">值表示嵌套结构层级</td></tr><tr><td style="text-align:center;">parent</td><td style="text-align:center;"><code>any</code></td><td style="text-align:center;">所属父级菜单数据</td></tr><tr><td style="text-align:center;">~<s>titleKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~~~ 组件的 titleKey 值~~~</td></tr><tr><td style="text-align:center;">~<s>disabledKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~~~ 组件的 disabledKey 值~~~</td></tr><tr><td style="text-align:center;">~<s>activeKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~~~ 组件的 activeKey 值~~~</td></tr><tr><td style="text-align:center;">~<s>itemClickFn</s>~</td><td style="text-align:center;"><code>Function</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>参数应为 item，表示二级菜单被点击</s>~</td></tr></tbody></table><h3 id="nocontenttemplate-可用变量值" tabindex="-1">noContentTemplate 可用变量值 <a class="header-anchor" href="#nocontenttemplate-可用变量值" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:center;">变量</th><th style="text-align:center;">类型</th><th style="text-align:center;">变量含义说明</th></tr></thead><tbody><tr><td style="text-align:center;">item</td><td style="text-align:center;"><code>any</code></td><td style="text-align:center;">父级菜单单个数据</td></tr><tr><td style="text-align:center;">deepth</td><td style="text-align:center;"><code>number</code></td><td style="text-align:center;">值表示嵌套结构层级</td></tr></tbody></table><h3 id="loadingtemplate-可用变量值" tabindex="-1">loadingTemplate 可用变量值 <a class="header-anchor" href="#loadingtemplate-可用变量值" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:center;">变量</th><th style="text-align:center;">类型</th><th style="text-align:center;">变量含义说明</th></tr></thead><tbody><tr><td style="text-align:center;">item</td><td style="text-align:center;"><code>any</code></td><td style="text-align:center;">父级菜单单个数据</td></tr><tr><td style="text-align:center;">deepth</td><td style="text-align:center;"><code>number</code></td><td style="text-align:center;">值表示嵌套结构层级</td></tr><tr><td style="text-align:center;">~<s>loadingKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;">~<s>组件的 loadingKey 值</s>~</td></tr></tbody></table><h3 id="innerlisttemplate-可用变量值" tabindex="-1">innerListTemplate 可用变量值 <a class="header-anchor" href="#innerlisttemplate-可用变量值" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:center;">变量</th><th style="text-align:center;">类型</th><th style="text-align:center;">变量含义说明</th></tr></thead><tbody><tr><td style="text-align:center;">item</td><td style="text-align:center;"><code>any</code></td><td style="text-align:center;">父级菜单单个数据</td></tr><tr><td style="text-align:center;">deepth</td><td style="text-align:center;"><code>number</code></td><td style="text-align:center;">值表示嵌套结构层级</td></tr><tr><td style="text-align:center;">~<s>titleKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 titleKey 值</s>~</td></tr><tr><td style="text-align:center;">~<s>loadingKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 loadingKey 值</s>~</td></tr><tr><td style="text-align:center;">~<s>childrenKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 childrenKey 值</s>~</td></tr><tr><td style="text-align:center;">~<s>disabledKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 disabledKey 值</s>~</td></tr><tr><td style="text-align:center;">~<s>openKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 openKey 值</s>~</td></tr><tr><td style="text-align:center;">~<s>activeKey</s>~</td><td style="text-align:center;"><code>string</code></td><td style="text-align:center;"><code>已经废弃</code>~<s>组件的 activeKey 值，用二级菜单</s>~</td></tr><tr><td style="text-align:center;">menuToggleFn</td><td style="text-align:center;"><code>Function</code></td><td style="text-align:center;">参数应为 item，表示菜单被展开，可选参数 event，原始事件</td></tr><tr><td style="text-align:center;">itemClickFn</td><td style="text-align:center;"><code>Function</code></td><td style="text-align:center;">参数应为可点击菜单的 item，表示菜单被点击,可选参数 event，原始事件</td></tr></tbody></table></div></div><div data-v-35e0cb6b><div class="page-contributor-label" data-v-35e0cb6b>Contributors</div><div class="page-contributor" data-v-35e0cb6b data-v-36223ac2><!--[--><a href="https://github.com/Pineapple0919" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/74694190?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/liuxdi" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/10958003?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/annoyc" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/28033581?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><!--]--></div></div><footer class="page-footer" data-v-35e0cb6b data-v-63a8fcc6><div class="edit" data-v-63a8fcc6><div class="edit-link" data-v-63a8fcc6 data-v-084d37fe><!----></div></div><div class="updated" data-v-63a8fcc6><!----></div></footer><!----><!--[--><!--]--><!----><aside class="toc-warpper" data-v-35e0cb6b data-v-38776bfe><nav class="devui-content-nav" data-v-38776bfe><h3 class="devui-fast-forward" data-v-38776bfe>快速前往</h3><ul class="devui-step-nav" data-v-38776bfe><!--[--><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#基本用法" title="基本用法" data-v-38776bfe>基本用法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#使用内置路由和链接类型" title="使用内置路由和链接类型" data-v-38776bfe>使用内置路由和链接类型</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#使用模板" title="使用模板" data-v-38776bfe>使用模板</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#复合层级和自动展开" title="复合层级和自动展开" data-v-38776bfe>复合层级和自动展开</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#改变键值" title="改变键值" data-v-38776bfe>改变键值</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#accordion-参数" title="Accordion 参数" data-v-38776bfe>Accordion 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#accordion-事件" title="Accordion 事件" data-v-38776bfe>Accordion 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#accordion-类型定义" title="Accordion 类型定义" data-v-38776bfe>Accordion 类型定义</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#accordionprops" title="AccordionProps" data-v-38776bfe>AccordionProps</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#模板可以用变量值-使用方法如下" title="模板可以用变量值(使用方法如下)" data-v-38776bfe>模板可以用变量值(使用方法如下)</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#menuitemtemplate-可用变量值" title="menuItemTemplate 可用变量值" data-v-38776bfe>menuItemTemplate 可用变量值</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#itemtemplate-可用变量值" title="itemTemplate 可用变量值" data-v-38776bfe>itemTemplate 可用变量值</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#nocontenttemplate-可用变量值" title="noContentTemplate 可用变量值" data-v-38776bfe>noContentTemplate 可用变量值</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#loadingtemplate-可用变量值" title="loadingTemplate 可用变量值" data-v-38776bfe>loadingTemplate 可用变量值</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#innerlisttemplate-可用变量值" title="innerListTemplate 可用变量值" data-v-38776bfe>innerListTemplate 可用变量值</a></li><!--]--></ul><div class="devui-marker" data-v-38776bfe></div></nav></aside></div></main></div><!----><!----><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_accordion_index.md\":\"a92e3443\",\"components_alert_index.md\":\"c7702e03\",\"components_anchor_index.md\":\"f7333cbb\",\"components_auto-complete_index.md\":\"4de98e8d\",\"components_avatar_index.md\":\"69aa04d5\",\"components_back-top_index.md\":\"d1ab787c\",\"components_badge_index.md\":\"e4750848\",\"components_breadcrumb_index.md\":\"c976c02b\",\"components_button_index.md\":\"5ad2976d\",\"components_card_index.md\":\"07ffbefa\",\"components_carousel_index.md\":\"f88f0b13\",\"components_cascader_index.md\":\"ee34cce7\",\"components_checkbox_index.md\":\"3ec7d7a1\",\"components_collapse_index.md\":\"9f2cbd98\",\"components_color-picker_index.md\":\"76658b37\",\"components_comment_index.md\":\"7f6ae658\",\"components_countdown_index.md\":\"556b68b1\",\"components_date-picker-pro_index.md\":\"a354c050\",\"components_date-picker_index.md\":\"00801143\",\"components_dragdrop_index.md\":\"27ca48b1\",\"components_drawer_index.md\":\"f1f95db0\",\"components_dropdown_index.md\":\"2e85d37e\",\"components_editable-select_index.md\":\"dfceeabe\",\"components_form_index.md\":\"aa7415f4\",\"components_fullscreen_index.md\":\"91a2fd77\",\"components_gantt_index.md\":\"c7536435\",\"components_grid_index.md\":\"646531b7\",\"components_icon_index.md\":\"b13a05fb\",\"components_image-preview_index.md\":\"6064aa0f\",\"components_input-icon_index.md\":\"03605b44\",\"components_input-number_index.md\":\"75cb181b\",\"components_input_index.md\":\"399db2a5\",\"components_layout_index.md\":\"bd89a2a7\",\"components_list_index.md\":\"398a7889\",\"components_loading_index.md\":\"86c25c88\",\"components_mention_index.md\":\"4e5fcead\",\"components_menu_index.md\":\"5e7b2a2a\",\"components_message_index.md\":\"288b49b1\",\"components_modal_index.md\":\"6d985802\",\"components_multi-auto-complete_index.md\":\"d7dd7812\",\"components_nav-sprite_index.md\":\"59326b1c\",\"components_notification_index.md\":\"17d66bf4\",\"components_overlay_index.md\":\"b3c2d8b1\",\"components_overview_index.md\":\"4f4893a2\",\"components_pagination_index.md\":\"fa43e1ee\",\"components_panel_index.md\":\"78140495\",\"components_popover_index.md\":\"e061fad6\",\"components_progress_index.md\":\"f99bb298\",\"components_quadrant-diagram_index.md\":\"5b863b4f\",\"components_radio_index.md\":\"1569e619\",\"components_rate_index.md\":\"8ed5b018\",\"components_read-tip_index.md\":\"65f3a3e8\",\"components_result_index.md\":\"5a0e2c71\",\"components_ripple_index.md\":\"e22eb85c\",\"components_search_index.md\":\"a6ca9673\",\"components_select_index.md\":\"14f5b72d\",\"components_skeleton_index.md\":\"87cfbcd2\",\"components_slider_index.md\":\"c3e69a49\",\"components_splitter_index.md\":\"7b49b977\",\"components_statistic_index.md\":\"699289db\",\"components_status_index.md\":\"9b3ee9c1\",\"components_steps-guide_index.md\":\"4d707f63\",\"components_steps_index.md\":\"75686d75\",\"components_sticky_index.md\":\"839717a7\",\"components_switch_index.md\":\"05eb9888\",\"components_table_index.md\":\"1b34dab5\",\"components_tabs_index.md\":\"2612fccc\",\"components_tag-input_index.md\":\"d6c90326\",\"components_tag_index.md\":\"9d46f105\",\"components_textarea_index.md\":\"f6a86e66\",\"components_time-picker_index.md\":\"f8cff83c\",\"components_time-select_index.md\":\"38dfaf50\",\"components_timeline_index.md\":\"9b7ebcb4\",\"components_tooltip_index.md\":\"f9f4b384\",\"components_transfer_index.md\":\"7005ca26\",\"components_tree-select_index.md\":\"d122e78e\",\"components_tree_index.md\":\"2611f2c7\",\"components_upload_index.md\":\"65171bcd\",\"components_virtual-list_index.md\":\"6c90a3dd\",\"contributing_development-specification_api-demo-design_index.md\":\"fc9f2d3e\",\"contributing_development-specification_coding-specification_index.md\":\"af51d196\",\"contributing_development-specification_component-document_index.md\":\"a849b30c\",\"contributing_development-specification_directory-organization_index.md\":\"58197a6f\",\"contributing_development-specification_index.md\":\"1df9cfa5\",\"contributing_index.md\":\"7660b0ff\",\"en-us_components_alert_index.md\":\"96d493c1\",\"en-us_components_auto-complete_api-en.md\":\"004a35e9\",\"en-us_components_avatar_index.md\":\"dbe38f1a\",\"en-us_components_badge_index.md\":\"e48f2672\",\"en-us_components_button_index.md\":\"ec772540\",\"en-us_components_carousel_index.md\":\"3fec7a3f\",\"en-us_components_color-picker_index.md\":\"9fe5a01c\",\"en-us_components_comment_index.md\":\"2a0696ba\",\"en-us_components_editable-select_index.md\":\"73d1175f\",\"en-us_components_form_index.md\":\"65caae2d\",\"en-us_components_input_index.md\":\"136ae80e\",\"en-us_components_menu_index.md\":\"0bb24150\",\"en-us_components_message_index.md\":\"3fa5c7c8\",\"en-us_components_modal_index.md\":\"736ef31f\",\"en-us_components_panel_index.md\":\"4a1db166\",\"en-us_components_popover_index.md\":\"6b07f22f\",\"en-us_components_progress_index.md\":\"b364f914\",\"en-us_components_radio_index.md\":\"bddcefa7\",\"en-us_components_rate_index.md\":\"3940452b\",\"en-us_components_read-tip_index.md\":\"56a74b67\",\"en-us_components_result_index.md\":\"369abc51\",\"en-us_components_ripple_index.md\":\"b6d519cb\",\"en-us_components_search_index.md\":\"8745e3f6\",\"en-us_components_skeleton_index.md\":\"73d6ba05\",\"en-us_components_slider_index.md\":\"d6b0ecd3\",\"en-us_components_splitter_index.md\":\"ae397e5b\",\"en-us_components_statistic_index.md\":\"6f27cda4\",\"en-us_components_status_index.md\":\"e80d4793\",\"en-us_components_tag_index.md\":\"2388e235\",\"en-us_components_tooltip_index.md\":\"6013670f\",\"en-us_index.md\":\"45997edd\",\"en-us_quick-start_index.md\":\"5cb0ca76\",\"index.md\":\"d8afff32\",\"on-demand_index.md\":\"cc889f91\",\"quick-start_index.md\":\"2f52f012\",\"theme-guide_index.md\":\"4b58afef\"}")</script>
    <script type="module" async src="/assets/app.43ba01c1.js"></script>
    
  </body>
</html>